<script setup lang='ts'>
import { computed} from 'vue'
import { NAvatar, NButton, useMessage, NPopconfirm } from 'naive-ui'
import { useUserStore } from '@/store'
import defaultAvatar from '@/assets/avatar.jpg'
import { isString } from '@/utils/is'
import { logout } from '@/api'
import { useRouter } from "vue-router";
const userStore = useUserStore()

const userInfo = computed(() => localStorage.getItem('username'))
const message = useMessage();
const router = useRouter();
const handleSelect = async () => {
  const username = localStorage.getItem('username')
  const params = {
    username
  }
  try {
    const { data, state } = await logout(params)

    if (state.code == '0') {
      message.success(state.msg);
      localStorage.setItem('token', '')
      localStorage.setItem('username', '')
      router.replace('/login');
    } else {
      message.error(state.msg);
    }
  } finally {

  }

}

const handlePositiveClick = () => {
  handleSelect()
}

</script>

<template>
  <div class="flex items-center overflow-hidden">
    <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
      <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
        <NAvatar size="large" round :src="userInfo.avatar" :fallback-src="defaultAvatar" />
      </template>
      <template v-else>
        <NAvatar size="large" round :src="defaultAvatar" />
      </template>
    </div>
    <div class="flex-1 min-w-0 ml-6">
      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
        {{ userInfo ?? 'ChatGPT' }}
      </h2>
      <!-- <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
                            <span v-if="isString(userInfo.description) && userInfo.description !== ''" v-html="userInfo.description" />
                          </p> -->
      <n-popconfirm @positive-click="handlePositiveClick">
        <template #trigger>
        <n-button type="warning" dashed>
          退出登录
        </n-button>
      </template>
      确认是否退出
      </n-popconfirm>
    </div>
  </div>
</template>
